<template>
	<view class="purchase_wrapper">
		<view class="purchase_list" v-if="tabsList.length > 0">
			<view class="perchase_item" v-for="item in tabsList" :key="item.id">
				<view class="perchase_up">
					<view class="picture">
						<img :src="item.cover" alt="" @error="tabErrorPicture(item.id)" />
					</view>
					<view class="learn_intro">
						<view class="title">{{item.title}}</view>
						<view class="msg">{{item.msg}}</view>
						<view class="time">{{item.time}}</view>
					</view>
				</view>
				<view class="perchase_down">
					<!-- <button class="single" @click="GotoSingle">单个课程</button> -->
					<button class="evaluate" @click="GotoEvaluate(item)">去评价</button>
					<button class="contact" @click="contactServer(item.id)">联系客服</button>
				</view>
			</view>
		</view>
		<view class="noData" v-else>
			<i class="iconfont icon-zanwushuju"></i>
			<text class="name">暂无数据</text>
		</view>
	</view>
</template>

<script>
	import { api_getAllOrderList } from '@/api/api'
	export default {
		data() {
			return {
				tabsList: [],
				total: 0,
				errorProduct: require('@/static/img/default_image.jpg'), 
			}
		},
		onLoad(){
			this.init();
		},
		methods: {
			init(){	// 初始化
				let query = {
					keyword: '',
					limit: 1000,
					page: 1,
					paid: 12,
				}
				uni.showLoading({ title: '数据加载中...' });
				api_getAllOrderList(query).then(res => {
					let { code,data: {orderlist,total},msg } = res;
					uni.hideLoading();
					if (code == 1) {
						this.tabsList = orderlist;
						this.total = total;
					} else {						
						uni.showToast({ title: msg,icon: 'error' });
					}
				}).catch(err => {
					uni.hideLoading();
					console.log(err);
				})
			},
			tabErrorPicture(id){	// 学习记录列表图片加载失败
				let i = this.tabsList.findIndex(v => v.id == id);
				this.tabsList[i].cover = this.errorProduct;		
			},
			contactServer(id){	// 联系客服
				uni.navigateTo({ url: `/pages/chat_window/index?orderid=${id}` });
			},
			GotoEvaluate(item){	// 去评价
				uni.navigateTo({ url: `/pages/evaluate/index?id=${item.id}&type=${item.type}` });
			},
			GotoSingle(){	// 单个课程
				console.log('single');
			},
			nanoid(len = 6) {  // 生成随机数
			    if (len <= 11) {
			        return Math.random().toString(36).slice(2,2+len).padEnd(len,'0')   
			    } else {
			        return this.nanoid(11) + this.nanoid(len - 11)   
			    }    
			}
		}
	}
</script>

<style lang="scss" scoped>
.purchase_wrapper{
	.purchase_list{
		.perchase_item{
			padding: 10px 10px 10px 15px;
			box-sizing: border-box;
			background-color: #fafafa;
			margin: 0 0 10px 0;
			.perchase_up{
				display: flex;		
				.picture{
					width: 80px;
					height: 80px;
					overflow: hidden;
					img{
						display: block;
						width: 80px;
						height: 80px;
						margin: 0;
					}
				}
				.learn_intro{
					padding: 0 0 0 10px;
					box-sizing: border-box;
					.title{
						font-size: 15px;
						margin: 0 0 10px 0;
					}
					.msg{
						font-size: 13px;
						padding: 5px 0;
					}
					.time{
						font-size: 12px;
					}
				}			
			}			
			.perchase_down{
				padding: 10px 0 0;
				overflow: hidden;
				button{
					float: right;
					font-size: 12px;
					line-height: 24px;
					background-color: #fff;
					padding: 0 10px;
					margin: 0 0 0 10px;					
					&::after{
						border: 1px solid #aeaeae;
					}
				}
			}
		}
	}
	.noData{
		padding: 50px 0 0;
		margin: 0 auto;
		text-align: center;
		.iconfont{
			display: block;
			margin: 0 auto;
			font-size: 100px;
			color: gray;
		}
		.name{
			font-size: 14px;
			color: #999;
		}
	}
}
</style>
